<template>
    <div class="dialog">
        <div class="inner-con">
            <span @click="$emit('close')">x</span>
            <h1 class="title">{{obj.title}}</h1>
            <p>{{obj.product}}</p>
            <div class="count-box">
                <span>价格：{{obj.price}}</span>
                <div class="count">
                    <div v-show="obj.num">
                        <span @click="count('-')">-</span>
                        <span>{{obj.num}}</span>
                    </div>
                    <span @click="count('+')">+</span>
                </div>
            </div>
            <div class="btns">
                <button @click="$router.push('/car')">冲赠</button>
                <button @click="$router.push('/car')">加入购物车</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['obj'],
    methods:{
        count(str){
            let num;
            console.log(this.obj)
            if(str === '+'){
                num = this.obj.num + 1;
            }else{
                num = this.obj.num - 1;
            }
            this.$emit('count',num,this.obj.id)
        }
    }
}
</script>
<style lang="scss" scoped>
    .dialog{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        background: rgba(0,0,0,.6);
    }
    .inner-con{
        background: #fff;
        width:80%;
        position:absolute;
        padding:10px;
        top:50%;
        left:50%;
        transform: translate3d(-50%,-50%,0);
        border-radius: 10px;
        .count-box{
            display: flex;
            justify-content: space-between;
        }
        .title{
            font-size:20px;
        }
    }
</style>

